<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <!-- 
        A
        B
        C
        D
     -->
    <ul>
        <li><a href="#/A">导航A</a></li>
        <li><a href="#/B">导航B</a></li>
        <li><a href="#/C">导航C</a></li>
        <li><a href="#/D">导航D</a></li>
    </ul>
    <div id="box">


    </div>
    <script>
        // 需求: 当url 标识发生变化时 修改div#box内容
        var box = document.getElementById('box');

        window.onhashchange = function() {
            // 
            // console.log(location.hash);
            // a -> #/A -> hash #/A
            var hash = location.hash;
            // #/A
            hash = hash.replace("#", "");
            switch (hash) {
                case "/A":
                    box.innerText = "AAAAA";
                    break;
                case "/B":
                    box.innerText = "BBBBB";
                    break;
                case "/C":
                    box.innerText = "CCCCC";
                    break;
                case "/D":
                    box.innerText = "DDDDD";
                    break;

                default:
                    break;
            }

        }
    </script>
</body>

</html>